<template>
  <el-drawer
    v-model="dialogFormVisible"
    :title="dialogTitle"
    size="50%"
    @close="handleClose"
  >
    <el-form
      :model="formData"
      ref="formRef"
      :rules="rules"
      label-position="right"
      label-width="80px"
      size="default"
      :scroll-to-error="true"
      :show-message="false"
    >
      <el-form-item
        label="所属部门"
        prop="department_id"
        class="required label-right-align"
        label-width="120px"
      >
        <el-select v-model="formData.department_id" placeholder="选择所属部门">
          <el-option
            v-for="item in department"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="面试岗位"
        prop="station_id"
        class="required label-right-align"
        label-width="120px"
      >
        <el-select v-model="formData.station_id" placeholder="选择面试岗位">
          <el-option
            v-for="item in stationOption"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="面试者姓名"
        prop="name"
        class="label-right-align"
        label-width="120px"
      >
        <el-input
          v-model="formData.name"
          filterable
          placeholder="输入面试者姓名"
          style="width: 240px"
          fit-input-width
        />
      </el-form-item>
      <el-form-item
        label="面试者电话"
        prop="mobile"
        class="label-right-align"
        label-width="120px"
      >
        <el-input
          v-model="formData.mobile"
          filterable
          placeholder="输入面试者联系电话"
          style="width: 240px"
          fit-input-width
        />
      </el-form-item>
      <el-form-item
        label="预约时间"
        prop="order_time"
        class="label-right-align"
        label-width="120px"
      >
        <el-date-picker
          v-model="formData.order_time"
          type="datetime"
          placeholder="请选择预约面试时间"
          format="YYYY-MM-DD HH:mm"
        />
      </el-form-item>
      <el-form-item
        label="面试官"
        prop="staff_id"
        class="required label-right-align"
        label-width="120px"
      >
        <el-select
          v-model="formData.interviewer"
          placeholder="选择面试负责人"
          filterable
        >
          <el-option
            v-for="item in staffOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="简历文件"
        prop="file"
        class="label-right-align"
        label-width="120px"
        :auto-upload="false"
      >
        <el-upload
          class="upload-demo"
          drag
          v-model="formData.file"
          :file-list="file_list"
          :action="apiUrl + '/upload/file'"
          :limit="1"
          accept=".doc,.docx,.pdf"
          name="iFile"
          :data="{ group_id: -1, file_type: 'file' }"
          :headers="{ Token: userStore.token }"
          :on-success="handleFile"
          :on-error="handleFileError"
          :on-remove="handleFileRemove"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">拖动文件到此处 或 <em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">请上传面试者简历，文件不要超过5M</div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogClose">关闭</el-button>
        <el-button type="primary" @click="submitForm"> 提交 </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  defineExpose,
  defineEmits,
  onMounted,
  watch,
} from "vue";
import { ElMessage } from "element-plus";
import { getListAPi } from "@/api/company/station";
import { getListAPi as getStaffListApi } from "@/api/company/staff";
import { getFormApi, saveApi } from "@/api/company/interview";
import useUserStore from "@/store/model/user";
const apiUrl = import.meta.env.VITE_BASIC_URL;
const userStore = useUserStore();
const dialogFormVisible = ref(false);
const dialogTitle = ref("");
const formRef = ref(null);
defineProps({
  department: {
    type: Array,
    default: [] as any[],
  },
});
const formData = ref({
  id: 0,
  department_id: "",
  station_id: "",
  name: "",
  mobile: "",
  order_time: "",
  file: "",
  interviewer: "",
});
const stationOption = ref<any[]>([]);
const staffOption = ref<any[]>([]);
watch(
  () => formData.value.department_id,
  (newVal) => {
    if (newVal) {
      getStationOptions();
    } else {
      stationOption.value = [];
    }
  }
);
const rules = reactive({
  department_id: [
    {
      required: true,
      message: "请选择部门",
    },
  ],
  station_id: [
    {
      required: true,
      message: "请选择面试岗位",
    },
  ],
  name: [
    {
      required: true,
      message: "请输入面试者姓名",
    },
  ],
  mobile: [
    {
      required: true,
      message: "请输入面试者联系方式",
    },
  ],
  order_time: [
    {
      required: true,
      message: "请选择面试时间",
    },
  ],
  file: [
    {
      required: true,
      message: "请上传面试者简历",
    },
  ],
});
const getStaffOptions = () => {
  getStaffListApi().then((res) => {
    staffOption.value = res.data.data.map((item: any) => {
      return {
        label:
          item.user.real_name +
          "-" +
          item.department.title +
          "-" +
          item.type_text,
        value: item.user_id,
      };
    });
  });
};
onMounted(() => {
  getStaffOptions();
});
const emits = defineEmits(["getTable"]);
const getStationOptions = () => {
  getListAPi({
    department_id: formData.value.department_id,
  }).then((res) => {
    stationOption.value = res.data;
  });
};
function getInfo(id) {
  getFormApi(id)
    .then((res: any) => {
      if (res.code == 1) {
        formData.value = res.data;
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {});
}

function submitForm() {
  formRef.value
    .validate()
    .then(() => {
      saveApi(formData.value).then((res: any) => {
        ElMessage.success("保存成功");
        dialogClose();
        emits("getTable");
      });
    })
    .catch((err) => {
      let msg = err.file[0].message;
      ElMessage.error(msg);
    });
}

const dialogClose = () => {
  dialogFormVisible.value = false;
};

const dialogOpen = (id: number) => {
  dialogFormVisible.value = true;
  if (id > 0) {
    dialogTitle.value = "编辑面试信息";
    getInfo(id);
  } else {
    dialogTitle.value = "添加面试信息";
  }
};

const handleClose = () => {
  formRef.value.resetFields();
  formData.value = {
    id: 0,
    department_id: "",
    station_id: "",
    name: "",
    mobile: "",
    order_time: "",
    file: "",
    interviewer: "",
  };
  file_list.value = [];
  dialogFormVisible.value = false;
};

const file_list = ref([]);
const handleFile = (res: any) => {
  if (res.code != 1) {
    ElMessage.error(res.msg);
    file_list.value = [];
  } else {
    formData.value.file = res.data.file_path;
  }
};
const handleFileRemove = (file: any) => {
  formData.value.file = "";
};
const handleFileError = () => {
  ElMessage.error("上传失败");
};
defineExpose({
  dialogOpen,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
.el-select {
  width: 200px;
}
.upload-demo {
  .el-icon svg {
    height: 3em;
    width: 3em;
  }
}
</style>

<style lang="scss" scoped></style>
